<template>
  <div class="video-panel" :class="{'video-panel-mini':isMini,'video-panel-fullscreen':isfullscreen,'video-panel-normal':!isfullscreen&&!isMini}" id="video_panel">
    <div class="tools-box">
      <div class="tv_box flex items-center" style="float: left;height:60px">
         
       
        <div class="flex " style="height:60px">
           <el-select
          v-model="groupNum"
          placeholder="楼层"
          clearable
          size="small"
          style="width: 100px"
          @change="groupNumChange"
        >
          <el-option
            v-for="item in importanceOptions"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
         </div>
        <div class=" ml-4"></div>
         <div class=" h-full mt-2">
           <el-pagination
          :current-page="currentPage"
          @current-change="handleCurrentChange"
            small
            background
            layout="prev, pager, next"
            :total="300"
          />
         </div>

      </div>
      <div class="tv_box" style="float: right;">
        <span @click="changeVideoBoxNum(1)"><i class="icon icon_num1"/></span>
        <span @click="changeVideoBoxNum(4)"><i class="icon icon_num2"/></span>
        <span @click="changeVideoBoxNum(6)"><i class="icon icon_num3"/></span>
        <span @click="changeVideoBoxNum(8)"><i class="icon icon_num4"/></span>
        <span @click="changeVideoBoxNum(9)"><i class="icon icon_num5"/></span>
        <span @click="changeVideoBoxNum(16)"><i class="icon icon_num6"/></span>
        <!--
        <span @click="fullscreen('.video-panel')"><i class="icon icon_view"/></span>
        -->
        <span @click="show_fullscreen()"><i class="icon icon_view"/></span>
        <!--
        <span @click="startAllVideo"><i class="icon icon_play_all" title="预览所有视频"/></span>
        <span @click="pauseAllVideo"><i class="icon icon_close_show" title="停止所有视频"/></span>
		-->
        <!--
        <span><i class="icon icon_num9" title="参数设置"/></span>
        -->
      </div>
    </div>
    <div :class="'video-box '+videoBoxStyle">
      <div @dragover="onDragOver($event)" 
          v-for="(item,index) in playVideoList"
          :key="'video-box-'+index"
          class="video-box-list relative" 
          @drop="onDrop($event,index)"
      >      
      <div v-if="!item.url" class="no-source">
          <img src="/src/assets/svgicon/video.svg" width="32" alt="">
          <span class="tips">NO SOURCE</span>        
    	</div>
         <HttpFlvPlayer         	
            v-if="item.url"
            :id="'flv-player-'+index"
            ref="videoPlay"
            :src="item.url"
            :loading="!item.url"
            @update:src="playerStopSrc(index,item.pos)"
        /> 
        <!-- <div class=" absolute top-0 left-0" v-if="item.url">{{item.url}}</div>      -->
        <div class=" absolute top-2 left-2 font-bold"  v-if="item.url">{{item.remark}}</div>     
      </div>
    </div>    
  </div>
</template>

<script lang="ts">
import HttpFlvPlayer from '/@/components/httpFlvPlayer/index.vue';
//import {LivePlayer} from '@liveqing/liveplayer'
//自定义覆盖面板尺寸
import './dist/video_panel.css';
import Http3DReq from '/@/utils/shf/http/Http3DReq';
import WarnVo from '/@/utils/vo/WarnVo';

//import {devIdMap} from '/@/components/globalval.vue'

export default {
  name: 'VideoPanel',
  components: { 
  	HttpFlvPlayer
  },	
  data() {
    return {
      videoBoxStyle: 'vWin-1',
      isMini: false,
      isfullscreen: false,
      playVideoList: [],
      currentPage:1,
      currentNum:6,
      videoMap:{},
      groupNum:"-2F",
      importanceOptions: ['-2F','-1F', '1F', '2F', '3F', '4F']
    }
  },
  created() {
  	//console.log('created............................')
  	this.getList();
  },
  methods:
      {
        async getList(){
          let that =  (this as any);
          let sourceTarget = "3";
          let floorName = parseInt(this.groupNum);
          let res:any = await Http3DReq.warnRtspList({sourceTarget,floorName});
          if(res)
          {
            this.videoMap = {};
            let i = 1;
            for (const dataRes of res) {
               let vo = new WarnVo(dataRes);
               vo.id = i+"";
               this.videoMap[vo.id] = vo;
               i++;
            }
             let camwincnt=window.localStorage.getItem('video_box_num');
            if (camwincnt!=null)
              {
                this.currentNum = camwincnt as any;
                this.setVideoWindow(camwincnt)
              }
            else
            {
              window.localStorage.setItem('video_box_num',"6");
              this.currentNum = 6;
              this.setVideoWindow(6);
            }

          }

         
        },
         groupNumChange(){
        console.log("groupNumChange = "+this.groupNum);
        
        this.getList();
      },
        handleCurrentChange:function(currentPage){
          this.currentPage = currentPage;
          this.setVideoWindow(this.currentNum);
        },
      	playerStopSrc: function (index,pos){      	
      		console.log("player Stop src"+index);
      		this.playVideoList[index].url='';
      		this.playVideoList[index].name='';

      		let playcam='playcam'+pos;
      		window.localStorage.setItem(playcam,'');
      	},
      	onDrop: function (e,index) {
      	//ws://localhost:10866/live?url=d:/flv/testVideo.mp4
      		console.log('&&&&&&&&&&&&&&&&&&&&&&&&');
          let targetIndex=(index+(this.currentPage-1)*this.currentNum);
      		console.log(index);      		
      		let path=e.dataTransfer.getData("Text");
      		console.log(path);
      		//let chn=devIdMap.get(path);
          let strData = window.localStorage.getItem(path);
          // console.log('strData = ',strData);
          // return;
      		let chn= JSON.parse(strData);

          console.log('chn >>>>>>> = ',strData);
          
      		// let url=`${import.meta.env.VITE_SVR_URL}`;
      		// url=url.replace(/^http/,'ws')+'live?url='+chn;
          let url = window["monitorUrl"]+chn.url;
      		console.log(url);
      		this.playVideoList[index].url=url;
      		this.playVideoList[index].name=path;
          this.playVideoList[index].remark=chn.remark;

          
          e.stopPropagation(); 
          //e.preventDefault();
          let playcam='playcam'+targetIndex;
          window.localStorage.setItem(playcam,strData);
          console.log("set URL......."+playcam+url);


		},
		onDragOver : function (e) 
		{
	      e.preventDefault();
	    },
        startAllVideo() {
          for (let i = 0; i < this.playVideoList.length; i++) {
            this.$refs.videoPlay[i].play()
          }
        },
        pauseAllVideo() {
          for (let i = 0; i < this.playVideoList.length; i++) {
            this.$refs.videoPlay[i].pause()
          }
        },
        changeVideoBoxNum(num) {
          window.localStorage.setItem('video_box_num', num);
          this.currentNum = num;
          this.setVideoWindow(num)
        },
        setVideoWindow(num) {
          let arr:any[] = [];
          
          if (arr.length < num) {
            const j = (num - arr.length)
            for (let i = arr.length; i < num; i++) {              
              // let playcam='playcam'+i;
              // let surl=window.localStorage.getItem(playcam);
              // if (surl==null) surl='';
              // arr.push({name: '', url: surl});
              let pos = (i+(this.currentPage-1)*this.currentNum);
              let videoVo = (this as any).videoMap[pos+1];
              if(!videoVo||!videoVo.content)
              {
                arr.push({name:'',url:'',remark:'',pos});
                continue;
              }
              arr.push({name:videoVo.sebeiname,url:(window as any)["monitorUrl"]+videoVo.content,remark:videoVo.sebeiname,pos});

            }
          } else {
            console.error('出现 else 不应该');
            arr = arr.slice(0, num);
          }
          this.playVideoList = arr;
          
          this.videoBoxNum = num;
          this.videoBoxStyle = 'vWin-' + num;

        },
        isFullscreen(fn) {
          let fullscreenEnabled
          // 判断浏览器前缀
          if (document.fullscreenEnabled) {
            fullscreenEnabled = document.fullscreenEnabled
          } else if (document.webkitFullscreenEnabled) {
            fullscreenEnabled = document.webkitFullscreenEnabled
            this.prefixName = 'webkit'
          } else if (document.mozFullScreenEnabled) {
            fullscreenEnabled = document.mozFullScreenEnabled
            this.prefixName = 'moz'
          } else if (document.msFullscreenEnabled) {
            fullscreenEnabled = document.msFullscreenEnabled
            this.prefixName = 'ms'
          }
          if (!fullscreenEnabled) {
            if (fn !== undefined) fn() // 执行不支持全屏的回调
          }
        },
        show_fullscreen() {
	      let fullarea = document.getElementById("video_panel");
	      if (this.isfullscreen) {
	        // 退出全屏
	        if (document.exitFullscreen) {
	          document.exitFullscreen();
	        } else if (document.webkitCancelFullScreen) {
	          document.webkitCancelFullScreen();
	        } else if (document.mozCancelFullScreen) {
	          document.mozCancelFullScreen();
	        } else if (document.msExitFullscreen) {
	          document.msExitFullscreen();
	        }
	      } else {
	        // 进入全屏
	        if (fullarea.requestFullscreen) {
	          fullarea.requestFullscreen();
	        } else if (fullarea.webkitRequestFullScreen) {
	          fullarea.webkitRequestFullScreen();
	        } else if (fullarea.mozRequestFullScreen) {
	          fullarea.mozRequestFullScreen();
	        } else if (fullarea.msRequestFullscreen) {
	          // IE11
	          fullarea.msRequestFullscreen();
	        }
	      }
	      this.isfullscreen = !this.isfullscreen;
	    },
        fullscreen(domName) {
          if (this.isfullscreen) {
            const methodName =
                this.prefixName === ''
                    ? 'exitFullscreen'
                    : `${this.prefixName}ExitFullscreen` // API 前缀
            document[methodName]() // 调用

            this.isfullscreen = false
          } else {
            this.isFullscreen()
            this.isfullscreen = true
            const element = document.querySelector(domName) // 获取dom
            const methodName =
                this.prefixName === ''
                    ? 'requestFullscreen'
                    : `${this.prefixName}RequestFullScreen` // API前缀
            element[methodName]() // 调用全屏
          }
        }
      }
}
</script>

<style>

.el-checkbox__label {
  padding-left: 0px !important;
}

.el-checkbox {
  margin-right: 10px;
}

.el-select {
  width: 180px;
}

.label2 {
  vertical-align: middle;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
}

</style>
